<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta
            name="description"
            content="A developer-oriented library of sleek, bubble-shaped skill icons designed for GitHub READMEs, portfolios, and resumes."
        />
        <title>ICONIC – Open Source Icon Gallery</title>
        <link
            rel="icon"
            href="https://raw.githubusercontent.com/YuheshPandian/ICONIC/refs/heads/main/icons/light/iconic.svg"
            type="image/svg+xml"
        />
        <meta name="author" content="Yuhesh Pandian" />
        <script
            src="https://kit.fontawesome.com/0f7ac66354.js"
            crossorigin="anonymous"
        ></script>

        <!-- Google Fonts -->
        <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Montserrat:wght@400;600&family=Poppins:wght@400;600&display=swap"
            rel="stylesheet"
        />

        <style>
            @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                background-color: #092635;
                font-family: "Inter", "Poppins", "Montserrat", sans-serif;
                line-height: 1.75;
                color: #bbb;
                opacity: 0;
                animation: fadeInPage 0.8s ease forwards;
                background-image: radial-gradient(#1b4242 1px, transparent 0);
                background-size: 40px 40px;
                background-position: -19px -19px;
            }

            nav {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: rgb(27, 66, 66);
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                width: 100%;
                padding: 12px 16px;
                min-height:80px;
            }
            nav ul {
                display: flex;
                align-items: center;
                gap: 20px;
                list-style: none;
            }
            nav ul a {
                font-size: 1.35rem;
                color: #5c8374;
                text-decoration: none;
                transition: 0.3s ease;
            }
            nav ul a:hover {
                color: #9ec8b9;
            }
            main {
                margin: 100px auto;
                max-width: 900px;
            }

            @keyframes fadeInPage {
                to {
                    opacity: 1;
                }
            }

            h1 {
                font-size: 4.25rem;
                letter-spacing: 2px;
                margin-bottom: 1rem;
                font-weight: 600;
                font-family: Poppins, sans-serif;
                opacity: 0;
                transform: translateY(10px);
                animation: fadeUp 0.6s ease forwards;
                animation-delay: 0.3s;
                line-height: 1.2;
                color: #5c8374;
            }

            @keyframes fadeUp {
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            h2 {
                font-family: Inter, sans-serif;
                font-size: 2.5rem;
                margin-top: 2rem;
                font-weight: 500;
                color: #5c8374;
                opacity: 0;
                border-bottom: 2px solid #1b4242;
                transform: translateY(6px);
                animation: fadeUp 0.5s ease forwards;
                animation-delay: 0.5s;
            }

            p,
            li {
                font-size: 1rem;
                opacity: 0;
                animation: fadeInText 0.7s ease forwards;
                animation-delay: 0.7s;
            }

            .preview-section div a {
                font-family: Montserrat, sans-serif;
                background: #9ec8b9;
                padding: 4px;
                border-radius: 4px;
                text-decoration: none;
                color: #092635;
                margin: auto;
                transition:200ms ease;
            }

            .preview-section div a:hover{
                background: #5c8374;
            }

            @keyframes fadeInText {
                to {
                    opacity: 1;
                }
            }

            ul {
                padding-left: 1.5rem;
            }

            footer {
                margin-block: 3rem;
                font-size: 0.9rem;
                color: #ddd;
                text-align: center;
                opacity: 0.8;
                transition: opacity 0.3s ease;
                will-change: opacity;
            }

            footer:hover {
                opacity: 1;
            }

            footer a {
                color: #5c8374;
                text-decoration: none;
                position: relative;
                transition: color 0.3s ease;
                will-change: color;
            }

            footer a::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 2px;
                bottom: -2px;
                left: 0;
                background-color: #9ec8b9;
                transform: scaleX(0);
                transform-origin: right;
                transition: transform 0.3s ease;
                will-change: transform;
            }

            footer a:hover::after {
                transform: scaleX(1);
                transform-origin: left;
            }

            footer a:hover {
                color: #9ec8b9;
            }
            .preview-img {
                -webkit-mask-image: linear-gradient(
                    to bottom,
                    #9EC8B9 80%,
                    transparent 100%
                );
                mask-image: linear-gradient(
                    to bottom,
                    #9EC8B9 80%,
                    transparent 100%
                );

                -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                fadeInPage 0.8s ease forwards
            }

            @media (max-width:900px) {

                body {
                    font-size:18px;
                }

                main {
                    padding-inline:2rem;
                }
                nav {
                    justify-content:center;
                    align-items:center;
                    ul li a {
                        font-size:1.55rem;
                    }
                }
                nav .logo{
                    img {
                        width:100px;
                    }
                    justify-self:flex-start;
                    position:absolute;
                    left:10px;
                    top:24px;

                }

                nav ul li:last-child {
                    position:absolute;
                    right:10px;
                }

                h1 {
                    font-size:3.25rem;
                }

                h2 {
                    font-size:2.25rem;
                }

                .preview-img {
                    width:100%;
                }

                p {
                    font-size:1.55rem;
                }

                ul li {
                    font-size:1.25rem;
                }
            }

            @media (max-width:480px) {

                body {
                    background: #092635;
                }

                nav ul li a {
                    font-size:1.35rem;
                }
                nav .logo {
                    top:16px;
                }
                nav .logo img {
                    content:url("https://raw.githubusercontent.com/YuheshPandian/ICONIC/refs/heads/main/icons/dark/iconic.svg");
                    width:50px;

                }

                h1 {
                    font-size:2.25rem;
                }
                h2 {
                    font-size:2rem;
                }
                p {
                    font-size:1rem;
                }

                main ul li{
                    font-size:1.05rem;
                }

                .quick-preview-header {
                    display:none;
                }
                .preview-img {
                    z-index:-1;
                    margin-block:10px;
                }
                .preview-section {
                    display: grid;
                    place-content: center;

                    > * {
                        grid-area: 1 / 1;
                    }
                }


            }
        </style>
    </head>
    <body>
        <header>
            <nav>
                <span class="logo"
                    ><img
                        src="https://raw.githubusercontent.com/YuheshPandian/ICONIC/refs/heads/main/assets/Banner.svg"
                        alt="Logo"
                        width="150px"
                /></span>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/gallery/">Gallery</a></li>
                    <li>
                        <a href="https://github.com/YuheshPandian/ICONIC"
                            ><i class="fa-brands fa-github"></i
                        ></a>
                    </li>
                </ul>
            </nav>
        </header>
        <main>
            <h1>CLEAN. CONSISTENT.<br />ICONIC.</h1>

            <p>
                ICONIC is a free, open-source collection of community-curated
                SVG icons, perfect for websites, apps, and design systems.
                Easily find and use icons that suit both Dark and Light modes.
            </p>

            <section class="preview-section">
                <h2 class="quick-preview-header">Quick Preview</h2>
                <img
                    src="https://raw.githubusercontent.com/YuheshPandian/ICONIC/refs/heads/main/assets/preview-img.png"
                    alt="preview-of-icons"
                    width="900px"
                    class="preview-img"
                />
                <div
                    style="width: 100%; display: flex; justify-content: center"
                >
                    <a href="/gallery">Load More</a>
                </div>
            </section>

            <h2>Highlights</h2>

            <ul>
                <li>
                    Simple folder structure: <code>/icons/dark/</code> and
                    <code>/icons/light/</code>
                </li>
                <li>
                    Instant icon access via minimal API:
                    <code>/icon/dark/python</code>
                </li>
                <li>Friendly for designers and beginners alike</li>
                <li>Automatically checks for naming and theme consistency</li>
            </ul>

            <h2>Join the Project</h2>

            <p>
                Whether you're a designer, developer, or open-source enthusiast,
                we welcome your help. Contribute icons, report issues, or just
                spread the word.
            </p>
        </main>

        <footer>
            Maintained with 💚 by
            <a
                href="https://github.com/YuheshPandian"
                target="_blank"
                rel="noopener noreferrer"
                >YuheshPandian</a
            >
        </footer>
    </body>
</html>
